<template>
  <div>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">面经后台</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">面经管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header">
        <span>共 {{ total }} 条记录</span>
        <el-button
          style="float: right"
          round
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="pushArticle"
          >添加面经</el-button
        >
      </div>
      <el-table :data="article_list">
        <el-table-column prop="stem" label="标题" fixed></el-table-column>
        <el-table-column prop="creator" label="作者"></el-table-column>
        <el-table-column prop="likeCount" label="点赞"></el-table-column>
        <el-table-column prop="views" label="浏览数"></el-table-column>
        <el-table-column prop="createdAt" label="更新时间"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row: { id } }">
            <el-button
              type="text"
              icon="el-icon-view"
              @click="viewArtcle(id)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="editAtcle(id)"
            ></el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="deleteAticle(id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        @current-change="changeCurrent"
      >
      </el-pagination>
    </el-card>
    <el-drawer title="title" :visible.sync="drawer" direction="rtl" size="50%">
      <el-form
        label-width="70px"
        :model="article_single"
        :rules="rules"
        ref="articleForm"
      >
        <el-form-item label="标题" prop="stem">
          <el-input type="text" v-model="article_single.stem"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <quillEditor
            v-model="article_single.content"
            @blur="$refs.articleForm.validateField('content')"
          ></quillEditor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmPush">确认</el-button>
          <el-button @click="drawer = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getArticleList, pushArticle } from '@/api/article'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'articl-page',
  components: { quillEditor },
  props: {},
  data() {
    return {
      params: {
        current: 1,
        pageSize: 10
      },
      article_list: [],
      total: null,
      title: '', // 抽屉标题
      drawer: false, // 抽屉开关
      article_single: {
        stem: '',
        content: ''
      },
      rules: {
        // 文章内容验证
        stem: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入正文', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 获取一页作品
    async getArticleList() {
      const res = await getArticleList(this.params)
      this.article_list = res.data.rows
      this.total = res.data.total
    },
    // 换页查看
    changeCurrent(value) {
      this.params.current = value
      this.getArticleList()
    },
    // 添加文章
    pushArticle() {
      this.drawer = true
      this.title = '添加面经'
    },
    async confirmPush() {
      await pushArticle(this.article_single)
      this.$message.success('添加面经成功')
      this.getArticleList()
      this.$refs.articleForm.resetFields()
      this.drawer = false
    }
  },
  created() {
    this.getArticleList()
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-top: 20px;
}
.el-pagination {
  text-align: center;
  margin-top: 16px;
}
::v-deep .ql-editor {
  min-height: 300px;
}
::v-deep .el-drawer__body {
  padding: 20px;
}
</style>
